import React, { PureComponent } from 'react';
import { Form, AutoComplete, Select, Input, DatePicker, Button, Tree } from 'antd';
import { Icon } from 'react-fa';
import Tabs from '@/components/Tabs/Tabs';
import Grid from '@/components/Grid';
import Dialog from '@/components/Dialog';
import Layout from '@/components/Layout';

const renderTreeNodes = (data = []) =>
  data.map(item => {
    if (item.items) {
      return (
        <Tree.TreeNode title={item.text} key={item.id} dataRef={item}>
          {renderTreeNodes(item.items)}
        </Tree.TreeNode>
      );
    }
    return <Tree.TreeNode {...item} title={item.text} key={item.id} dataRef={item} />;
  });

const ModelTabForm = () => (
  <Tabs defaultActiveKey="1">
    <Tabs.TabPane tab="插页一" key="1">
      <Form layout="vertical">
        <Form.Item label="名称">
          <Input placeholder="请输入名称" />
        </Form.Item>
        <Form.Item label="备注">
          <Input.TextArea rows={8} placeholder="请输入至少五个字符" />
        </Form.Item>
      </Form>
    </Tabs.TabPane>
    <Tabs.TabPane tab="插页二" key="2"></Tabs.TabPane>
  </Tabs>
);
const ModelTreeForm = () => {
  const data = [
    {
      id: 1,
      text: '测试机构',
      items: [
        {
          id: 11,
          text: '分支机构',
        },
      ],
    },
  ];
  const dataSource = []
  return (
    <React.Fragment>
      <div className="x-query">
        <AutoComplete
          dataSource={dataSource}
          placeholder="请输入节点名称"
        >
          <Input suffix={<Icon name="search" />} />
        </AutoComplete>
      </div>
      <Tree checkable multiple defaultExpandAll rowKey={record => record.id}>
        {renderTreeNodes(data)}
      </Tree>
    </React.Fragment>
  );
};
const ModelTreeGridForm = () => {
  const treeData = [
    {
      id: 1,
      text: '测试机构',
      items: [
        {
          id: 11,
          text: '分支机构',
        },
      ],
    },
  ];
  const columns = [
    {
      title: '列名',
      dataIndex: 'name',
      width: 200,
    },
    {
      title: '创建时间',
      dataIndex: 'crtime',
      width: 200,
      align: 'center',
    },
  ];
  const data = [
    {
      id: 1,
      name: '测试数据',
      crtime: '2019-07-30 10:30:10',
    },
  ];
  const dataSource = []
  return (
    <Layout
      query={
        <AutoComplete
          dataSource={dataSource}
          placeholder="请输入节点名称"
        >
          <Input suffix={<Icon name="search" />} />
        </AutoComplete>
      }
      side={
        <Tree defaultExpandAll rowKey={record => record.id}>
          {renderTreeNodes(treeData)}
        </Tree>
      }
    >
      <Layout
        toolbar={{
          left: <Button type="primary">新建</Button>,
          right: (
            <Form layout="inline">
              <Input.Search placeholder="请输入要查询的关键词" />
            </Form>
          ),
        }}
      >
        <Grid
          selectedRows={[]}
          columns={columns}
          data={data}
          pagination={{
            pageNumber: 20,
            total: 300,
          }}
        />
      </Layout>
    </Layout>
  );
};
const ModelGridForm = () => {
  const columns = [
    {
      title: '列名',
      dataIndex: 'name',
      width: 200,
    },
    {
      title: '创建时间',
      dataIndex: 'crtime',
      width: 200,
      align: 'center',
    },
  ];
  const data = [
    {
      id: 1,
      name: '测试数据',
      crtime: '2019-07-30 10:30:10',
    },
  ];
  return (
    <Layout>
      <Grid
        selectedRows={[]}
        columns={columns}
        data={data}
        pagination={{
          pageNumber: 20,
          total: 300,
        }}
      />
    </Layout>
  );
};
const ModelGridToolbarForm = () => {
  const columns = [
    {
      title: '列名',
      dataIndex: 'name',
      width: 200,
    },
    {
      title: '创建时间',
      dataIndex: 'crtime',
      width: 200,
      align: 'center',
    },
  ];
  const data = [
    {
      id: 1,
      name: '测试数据',
      crtime: '2019-07-30 10:30:10',
    },
  ];
  return (
    <Layout
      toolbar={{
        left: <Button type="primary">新建</Button>,
        right: (
          <Form layout="inline">
            <Input.Search placeholder="请输入要查询的关键词" />
          </Form>
        ),
      }}
    >
      <Grid
        selectedRows={[]}
        columns={columns}
        data={data}
        pagination={{
          pageNumber: 20,
          total: 300,
        }}
      />
    </Layout>
  );
};

const SearchForm = () => (
  <Form layout="vertical">
    <Form.Item label="名称">
      <Input placeholder="请输入名称" />
    </Form.Item>
    <Form.Item label="开始时间">
      <DatePicker
        showTime
        placeholder="请选择"
        format="YYYY-MM-DD HH:mm:ss"
        style={{ width: '100%' }}
      />
    </Form.Item>
    <Form.Item label="任务负责人">
      <Select placeholder="请选择">
        <Select.Option value="付晓晓">付晓晓</Select.Option>
        <Select.Option value="周毛毛">周毛毛</Select.Option>
      </Select>
    </Form.Item>
    <Form.Item label="产品描述">
      <Input.TextArea rows={4} placeholder="请输入至少五个字符" />
    </Form.Item>
  </Form>
);

class DemoPage extends PureComponent {
  columns = [
    {
      title: '列名',
      dataIndex: 'name',
      width: 200,
    },
    {
      title: '创建时间',
      dataIndex: 'crtime',
      width: 200,
      align: 'center',
    },
  ];
  data = [
    {
      id: 1,
      name: '测试数据',
      crtime: '2019-07-30 10:30:10',
    },
  ];
  componentDidMount() {}
  handleForm(e, key) {
    switch (key) {
      case 'tab':
        Dialog.open({
          title: 'tab演示',
          // fixed: true,
          component: ModelTabForm,
        });
        break;
      case 'tree':
        Dialog.open({
          title: 'tree演示',
          fixed: true,
          component: ModelTreeForm,
        });
        break;
      case 'grid':
        Dialog.open({
          title: 'grid演示',
          fixed: true,
          width: 720,
          component: ModelGridForm,
        });
        break;
      case 'grid-toolbar':
        Dialog.open({
          title: 'grid toolbar演示',
          fixed: true,
          width: 720,
          component: ModelGridToolbarForm,
        });
        break;
      case 'tree-grid':
        Dialog.open({
          title: '左右两栏演示',
          fixed: true,
          width: 960,
          component: ModelTreeGridForm,
        });
        break;
      default:
    }
  }
  showSearchPanel = e => {
    Dialog.drawer({
      title: '高级查询',
      component: SearchForm,
    });
  };
  render() {
    const buttons = [
      {
        key: 'tab',
        text: '内含插页',
      },
      {
        key: 'tree',
        text: '树选择控件',
      },
      {
        key: 'grid',
        text: '列表选择控件',
      },
      {
        key: 'grid-toolbar',
        text: '列表选择控件带toolbar',
      },
      {
        key: 'tree-grid',
        text: '左右两栏演示',
      },
    ];
    return (
      <Layout
        toolbar={{
          left: buttons.map(button => (
            <Button onClick={e => this.handleForm(e, button.key)} key={button.key}>
              {button.text || button.key}
            </Button>
          )),
          right: (
            <Form layout="inline">
              <Input.Search placeholder="请输入要查询的关键词" />
              <Button onClick={this.showSearchPanel}>高级查询</Button>
            </Form>
          ),
        }}
      >
        <Grid
          selectedRows={[]}
          columns={this.columns}
          data={this.data}
          pagination={{
            pageNumber: 20,
            total: 300,
          }}
        />
      </Layout>
    );
  }
}

export default DemoPage;
